<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section>
    <h4>面试题</h4>
    <ul>
        <li>css 如何做适配</li>
        <li>js 如何获取分辨率</li>
        <li>BFC？</li>
        <li>影藏元素的方式有哪些？</li>
        <li>选择器 子选择器(.one > one_1) 相邻同胞选择器(.one + .two)</li>
    </ul>
</section>
<section>
    <h4>适配</h4>
    <ul>
        <li>屏幕尺寸</li>
        <li>屏幕分辨率</li>
        <li>长度单位px pt rem em vw vh</li>
    </ul>
</section>
<section>
    <h4>如何做适配</h4>
    <ul>
        <li>屏幕尺寸相同（不相同），如何做适配？</li>
        <li>像素即px，是画面中最小的点（单位色块）</li>
        <li>屏幕分辨率: 如1024×768就是说设备屏幕的水平方向上有1024个像素点，垂直方向上有768个像素点</li>
    </ul>
</section>
<p>
    相同设备、相同分辨率
    相同设备、不同分辨率
    不同设备、相同分辨率
    不同设备、不同分辨率

    页面缩放比
    物理像素（设备像素，单位pt）：设备能控制显示的最小物理单位
    设备独立像素（在javaScript中可以通过window.screen.width/ window.screen.height 查看）
    DPR = 设备像素 / 设备独立像素 （在JavaScript中可以通过 window.devicePixelRatio 获取）
    320 / 320 1:1
    640 / 320 2:1

    screen.width 和 screen.height 受win显示设置影响，不受浏览器缩放影响
    window.devicePixelRatio 受win显示设置影响，也受到浏览器缩放影响
    如果win显示设置和浏览器缩放都有，window.devicePixelRatio取两者的乘积

    win 显示设置无缩放 screen.width 1440
    win 显示设置无缩放 screen.height 900
    window.devicePixelRatio 1

    win 显示设置无缩放 screen.width 1920
    win 显示设置无缩放 screen.height 1080
    window.devicePixelRatio 1

    win 显示设置缩放(125%) screen.width 1536
    win 显示设置缩放(125%) screen.height 864
    window.devicePixelRatio 1.25

    mac 显示设置无缩放 screen.width 1512
    mac 显示设置无缩放 screen.height 982
    window.devicePixelRatio 2

</p>
</body>
</html>
